var PurchaseOrderBoard = function () {
  var SearchForm = function () {
    var template = /* html */ `
      <div>
        <div>
          <el-select clearable v-model="search.hasTardiness" style="width:100%" size="small" placeholder="请选择是否拖期">
            <el-option :value="true" label="拖期"></el-option>
            <el-option :value="false" label="正常"></el-option>
          </el-select>
        </div>
      </div>
    `;

    return {
      props: {
        search: {
          type: Object,
          required: true
        }
      },

      data: function () {
        return {};
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="purchase-order-board" v-loading.fullscreen.lock="loading">
      <search-btns ref="searchBtns" :has-search="true" search-btn-text="查询" :popover-width="200"
        search-title="查询条件" @after-leave="afterLeave">
        <div style="overflow:auto" slot="search">
          <search-form :search="search"></search-form>
          <div style="text-align:center;margin-top:4px">
            <el-button size="small" type="primary" @click="searchData(true)">查询</el-button>
          </div>
        </div>
      </search-btns>
      <template v-if="isShow">
        <div class="purchase-order-content">
          <purchase-order-item ref="orderItem" v-if="orderList!==null" :orders="orderList" :search="oldSearch">
          </purchase-order-item>
          <div v-else class="no-data">
            暂无采购数据
          </div>
        </div>
      </template>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    data: function () {
      var search = {
        hasTardiness: ''
      };
      return {
        loading: false,
        isShow: false,
        orderList: null,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setOrderList(true).then(function () {
        self.isShow = true;
        self.loading = false;
        self.boardRunning();
      }).catch(function () {
        self.isShow = true;
        self.loading = false;
      });
    },

    methods: {
      setOrderList: function (hasAlert) {
        if (hasAlert === undefined) {
          hasAlert = false;
        }

        var self = this;
        return ajaxRequest('displayView/getPurchaseOrderDutyData', {}, true, hasAlert).then(function (orderList) {
          orderList = _.map(orderList, function (order) {
            order = new PurchaseOrderInfo(order);
            return order;
          });
          orderList = _.orderBy(orderList, ['tardiness', 'oweCount'], ['desc', 'desc']);
          for (var i = 0; i < orderList.length; i++) {
            var order = orderList[i];
            order.rowIndex = i;
          }
          self.orderList = orderList;
          return orderList;
        });
      },

      afterLeave: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function (isSearch) {
        var self = this;
        if (isSearch) {
          this.oldSearch = _.cloneDeep(this.search);
          this.$refs['searchBtns'].closePopover();
        }
        this.loading = true;
        setTimeout(function() {
          if (self.$refs['orderItem']) {
            self.$refs['orderItem'].filterOrderList();
          }
          self.loading = false;
        }, 300);
      },

      boardRunning: function () {
        this.clearTimeoutList();

        this.resetOrderList();
      },

      resetOrderList: function () {
        var self = this;
        var timeout = setTimeout(function () {
          self.setOrderList().then(function () {
            self.$nextTick(function(){
              self.searchData();
              self.resetOrderList();
            });
          });
          self.timeoutList[0] = null;
        }, 30 * 60 * 1000);
        this.timeoutList[0] = timeout;
      }
    },

    components: {
      SearchBtns: SearchBtns,
      SearchForm: SearchForm,
      PurchaseOrderItem: PurchaseOrderItem
    },

    template: template
  };
}();
